<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Geometry</title>

    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<script src="../lib/three.js"></script>
<script src="../lib/OrbitControls.js"></script>
<script>
    const scene = new THREE.Scene()

    const geometry = new THREE.Geometry()
    const p1 = new THREE.Vector3(0, 0, 0)
    const p2 = new THREE.Vector3(0, 100, 0)
    const p3 = new THREE.Vector3(50, 0, 0)
    const p4 = new THREE.Vector3(0, 0, 100)
    geometry.vertices.push(p1, p2, p3, p4)

    const face1 = new THREE.Face3(0, 1, 2)
    const n1 = new THREE.Vector3(0, 0, -1)
    const n2 = new THREE.Vector3(0, 0, -1)
    const n3 = new THREE.Vector3(0, 0, -1)
    face1.vertexNormals.push(n1, n2, n3)
    face1.color = new THREE.Color(0xffff00)
    face1.vertexColors = [
        new THREE.Color(0xffff00),
        new THREE.Color(0xff00ff),
        new THREE.Color(0x00ffff),
    ]

    const face2 = new THREE.Face3(0, 2, 3)
    face2.normal = new THREE.Vector3(0, -1, 0)

    geometry.faces.push(face1, face2)

    const material = new THREE.MeshLambertMaterial({
        vertexColors: THREE.VertexColors,
        side: THREE.DoubleSide, // 两面可见
    })
    const mesh = new THREE.Mesh(geometry, material)
    scene.add(mesh)

    const point = new THREE.PointLight(0xffffff)
    point.position.set(200, 200, 200)
    scene.add(point)

    const ambient = new THREE.AmbientLight(0xffffff)
    scene.add(ambient)

    const axesHelper = new THREE.AxesHelper(200)
    scene.add(axesHelper)

    const width = window.innerWidth
    const height = window.innerHeight
    const k = width / height
    const s = 100
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)
    camera.position.set(200, 200, 200)
    camera.lookAt(scene.position)

    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(width, height)
    renderer.setClearColor(0xb9d3ff, 1)
    document.body.appendChild(renderer.domElement)

    renderer.render(scene, camera)
</script>
</body>
</html>
